<template>
  <div class="page-content">
    <hy-table :tableData="userList" v-bind="contentTableConfing">
      <template #header>
        <div class="header" v-if="isCreate">
          <el-button type="primary" :icon="Plus">新增</el-button>
        </div>
      </template>
      <!--页面公共的插槽的插槽 -->
      <template #enable="scope">
        <el-tag :type="scope.row.enable === 1 ? 'success' : 'danger'">{{ scope.row.enable === 1 ? "启用" : "禁用" }}</el-tag>
      </template>
      <template #createAt="scope">
        <span>{{ $filters.formatTime(scope.row.createAt) }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ $filters.formatTime(scope.row.updateAt) }}</span>
      </template>
      <template #handler>
        <el-button type="primary" text :icon="Edit" v-if="isUpdate">编辑</el-button>
        <el-button type="danger" text :icon="Delete" v-if="isDelete">删除</el-button>
      </template>
      <!-- 页面独立的插槽 遍历剩余插槽 在单独的组件中使用 -->
      <template v-for="item in otherPropSlots" :key="item.props" #[item.slotName]="scope">
        <slot :name="item.slotName" :row="scope.row"></slot>
      </template>
      <!-- 分页器 -->
      <template #footer v-if="showFooter">
        <el-pagination v-model:currentPage="pageInfo.offset" v-model:page-size="pageInfo.size" :page-sizes="pagesizeArr" background :layout="pageLayout" :total="userCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </template>
    </hy-table>
  </div>
</template>

<script  lang="ts">
import { defineComponent, computed, ref, watch } from "vue"
import HyTable from "@/base-ui/table"
import { Delete, Edit, Plus } from "@element-plus/icons-vue"

import { useStore } from "@/store"

import { usePermission } from "@/hooks/user-permission"

export default defineComponent({
  components: { HyTable },
  props: {
    contentTableConfing: {
      type: Object,
      require: true
    },
    pageName: {
      type: String,
      require: true
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    const store = useStore()
    const pageInfo = ref({ offset: 1, size: 3 })

    // 获取权限控制
    const isCreate = usePermission(props.pageName, "create")
    const isUpdate = usePermission(props.pageName, "update")
    const isDelete = usePermission(props.pageName, "delete")

    watch(pageInfo, () => getPageData(), { deep: true })
    // 1 调用 vuex 请求数据
    const getPageData = (query: any = {}) => {
      store.dispatch("system/getPageListAction", {
        pageName: props.pageName,
        queryInfo: {
          offset: pageInfo.value.offset,
          size: pageInfo.value.size,
          ...query
        }
      })
    }
    getPageData()

    // 2 获取数据
    const userList = computed(() => store.getters["system/pageListData"](props.pageName))
    const userCount = computed(() => store.getters["system/pageListCount"](props.pageName))

    // 3 处理分页
    const pagesizeArr = ref([3, 5, 10, 20])
    const pageLayout = ref("total, sizes, prev, pager, next, jumper")
    const handleCurrentChange = (page: number) => {
      pageInfo.value.offset = page
    }
    const handleSizeChange = (size: number) => {
      pageInfo.value.size = size
    }

    // 4 查找不共用的插槽
    const otherPropSlots = props.contentTableConfing?.propsList.filter((item: any) => {
      if (item.slotName === "createAt" || item.slotName === "updateAt" || item.slotName === "handler") return false
      if (item.slotName) return true
    })
    return {
      userList,
      Delete,
      Edit,
      Plus,
      getPageData,
      userCount,
      pagesizeArr,
      pageLayout,
      pageInfo,
      handleCurrentChange,
      handleSizeChange,
      otherPropSlots,
      isCreate,
      isUpdate,
      isDelete
    }
  }
})
</script>

<style lang="less" scoped></style>
